<template>
	<div class="container">
		<section v-for="(item,index) in dataList" :key="index">
			<div class="title">
				<h2>{{item.name}}</h2>
				<a href="#">查看更多 ></a>
			</div>
			<ul class="list">
				<li v-for="(option,index) in item.list" :key="index">
					<img :src="option.avatar" alt />
					<div class="info">
						<h3>{{option.title}}</h3>
						<p>{{option.createAt}}</p>
					</div>
					<a href="#">进入</a>
				</li>
			</ul>
		</section>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dataList: [
				{
					name: "精选手册",
					list: [
						{
							title: "java",
							avatar: "/images/java.png",
							createAt: "2020-6-13"
						},
						{
							title: "前端",
							avatar: "/images/web.png",
							createAt: "2020-6-13"
						}
					]
				},
				{
					name: "精选博客",
					list: [
						{
							title: "学习编程的五大误区",
							avatar: "/images/java.png",
							createAt: "2020-6-13"
						},
						{
							title: "项目开发中你怎样使用git的",
							avatar: "/images/java.png",
							createAt: "2020-6-13"
						}
					]
				}
			]
		};
	}
};
</script>

<style scoped>
.container {
	font-size: 0.2rem;
	width: 90%;
	margin: 0.2rem auto;
}

.container section {
	margin: 0.2rem auto;
}
section .title {
	width: 100%;
	/* margin: 0.2rem auto; */
	height: 0.8rem;
	line-height: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
section .title h2 {
	font-size: 0.3rem;
	flex: 1;
	align-self: center;
}
section .title a {
	font-size: 0.24rem;
	align-self: center;
	color: #888888;
}
.container img {
	height: 1rem;
	width: auto;
}
.list li {
	display: flex;
	justify-content: space-between;
	margin: 0.15rem auto;
}
.list li .info {
	margin-left: 0.3rem;
	flex: 1;
}
</style>